import React, { useContext, useState, useEffect } from "react";
import Taro, { useDidShow, useDidHide } from "@tarojs/taro";
import { View, Image, Text, ScrollView } from "@tarojs/components";
import { AtSearchBar, AtToast } from "taro-ui";

import { CommonContext, setTabBar } from "../../store";
import { listTypes } from "./helper";

import api from "@api/api.js";
import "./index.less";
import SelectDown from "@cmp/select/index.jsx";

import shaixuanPng from "@assets/plan/shaixuan.png";

export default () => {
  const [state, dispatch] = useContext(CommonContext);
  const [toast, setToast] = useState({ text: "", isOpened: false }); // 筛选
  const [search, setSearch] = useState(""); // 查询
  const [sysParam, setSysParam] = useState({ diag_status: [] }); // 数据字典
  const [list, setList] = useState([]);
  const [listType, setListType] = useState("跟进中"); // 方案列表控制
  const [screen, setScreen] = useState({ open: false, code: "" }); // 筛选控制
  useDidShow(() => {
    dispatch(setTabBar("方案"));
    getSysParam(getList);
  });
  useDidHide(() => {
    setToast({ text: "", isOpened: false });
  });
  // 获取数据字典
  const getSysParam = async (fn) => {
    const { data, code } = await api.getSysParam(["diag_status"]);
    if (code == 200) {
      setSysParam(data);
      fn && fn();
    }
  };
  // 获取方案列表
  const getList = async (status) => {
    const { data } = await api.getDiagnosisSchemes(status);
    setList(data);
  };
  // 方案列表控制
  const clickListType = (item) => {
    setScreen({ ...screen, code: "" });
    setListType(item.label);
    getList(item.status);
  };
  // 筛选
  const clickScreen = () => {
    setScreen({ ...screen, open: !screen.open });
  };
  const codeScreen = (code) => {
    setScreen({ code, open: false });
    getList(code);
  };
  // 查询
  const searchChange = (value) => {
    setSearch(value);
  };
  const onActionClick = () => {
    console.log(search);
  };
  // 完成方案
  const modalClick = async (obj, id) => {
    if (obj.id == "1") {
    } else if (obj.id == "2") {
      const { code } = await api.completedDiagSchemes(id);
      if (code == 200) {
        setToast({ text: "操作成功", isOpened: true });
        getList();
      }
    }
  };
  // 跳转详情
  const goDtl = (id) => {
    Taro.navigateTo({ url: `/pages/add/index?id=${id}` });
  };

  return (
    <View className="bgBox">
      <AtToast {...toast}></AtToast>
      <View className="titleBox">
        {listTypes.map((item) => (
          <View
            className={["listType", listType === item.label && "active"]}
            onClick={() => {
              clickListType(item);
            }}
          >
            {item.label}
            {listType === item.label && <View className="listTypeLine"></View>}
          </View>
        ))}
        <View
          className={["select", screen.code && "selectActive"]}
          onClick={clickScreen}
        >
          <Image src={shaixuanPng} />
          筛选
        </View>
        {screen.open && (
          <View className="screenBg">
            <View className="screen">
              <AtSearchBar
                placeholder="输入患者姓名或患者手机号"
                actionName="查询"
                value={search}
                onChange={searchChange.bind(this)}
                onActionClick={onActionClick.bind(this)}
              />
              {sysParam.diag_status &&
                sysParam.diag_status.map((item) => (
                  <View
                    className={[
                      "screenItem",
                      screen.code == item.paramCode && "screenActive",
                    ]}
                    onClick={() => {
                      codeScreen(item.paramCode);
                    }}
                  >
                    {item.paramDesc}
                  </View>
                ))}
            </View>
          </View>
        )}
      </View>
      <ScrollView className="list" scrollY>
        {list &&
          list.map((item) => {
            return (
              <View className="item listBox">
                {/* 患者信息 */}
                <View
                  className="baseInfo"
                  onClick={() => {
                    goDtl(item.diagnosisSchemesId);
                  }}
                >
                  <View className="base">
                    <Text className="name">{item.patientDTO.name}</Text>
                    <Text className="sex">{item.patientDTO.gender}</Text>
                    <Text className="age">
                      {item.patientDTO.age ? `${item.patientDTO.age}岁` : ""}
                    </Text>
                    <Text className="status">{item.status}</Text>
                  </View>

                  <View className="info">
                    <Text className="number">
                      第{item.totalNumberOfDiag}次就诊
                    </Text>
                    <Text className="time">{item.lastDiagTime}</Text>
                  </View>
                </View>
                {/* 手术信息 */}
                <View
                  className="surgicalTypes"
                  onClick={() => {
                    goDtl(item.diagnosisSchemesId);
                  }}
                >
                  <Text className="label">手术方案分类</Text>
                  <Text className="vals">
                    {item.surgicalTypes.map((item) => (
                      <Text className="val">{item}</Text>
                    ))}
                  </Text>
                </View>
                {/* 专家信息 */}
                <View className="doctor">
                  <Image src={api.bseUrl + item.dentistryUserDTO.headimgurl} />
                  <Text className="name">{item.dentistryUserDTO.name}</Text>
                  <SelectDown
                    className="action"
                    data={[
                      { id: "1", name: "查看日程" },
                      { id: "2", name: "完成方案" },
                    ]}
                    title={"更多操作"}
                    onclick={(fn) => {
                      fn();
                    }}
                    onchange={(obj) => {
                      modalClick(obj, item.diagnosisSchemesId);
                    }}
                  />
                </View>
              </View>
            );
          })}
      </ScrollView>
    </View>
  );
};
